import React from 'react'
import _ from 'underscore'
import View from 'lib/View.jsx'
import RootScope from './JSRootScope.es6'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import format from 'lib/util/format'
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
var traceCols = [{
  title:'名称',
  key:'jsUrl',
  render:function(fmtVal,rowData){
    return (
      <a href={'#/jserror/traces/'+rowData.id}>{fmtVal}</a>
    )
  }
},{
  title:'错误信息',
  key:'errMsg',
  sortable:false
},{
  title:'首次发生时间',
  width:100,
  key:'firstTime',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'最后发生时间',
  width:100,
  key:'lastTime',
  sortable:true,
  formatter:format.stampToTime
},{
  title:'发生次数',
  sortable:true,
  key:'errCount'
},{
  title:'影响设备数',
  sortable:true,
  key:'deviceNum'
}]
export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <div className="box">
          <Card title="Top 5 Javascript错误次数" extra={
              addWidgetMixin(this.scope.chart0Api,'Top 5 Javascript错误',{
                chartType: 'area'
              })
            }>
            <ChartWidget
              store={this.state.chart0}
              chartType="area"
            />
          </Card>
        </div>
        <div className="box">
          <Card title="Top 5 JS错误类型">
            <ChartWidget store={this.state.chart1} chartType="column" chartSettings={{
                xAxis:{
                  type:'category',
                  minTickInterval:1,
                  categories:this.state.chart1.series?this.state.chart1.series[0].data.map((s) => s.name):[]
                },
                legend:{
                  enabled:false
                }
              }} />
          </Card>
        </div>
        <div className="box">
          <Card title="JS错误列表">
            <GridWidget
              cols={traceCols}
              store={this.state.grid}
            />
          </Card>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:RootScope
}
